<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #F2F2F2 url() 0 0 no-repeat;
		}
		.box{
			text-align: center;
			margin-top: 100px;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script>
		$(function(){

			function fill_zero(num){
				if(num<10){
					return "0"+num
				}else{
					return num;
				}
			}

			function run(){

				now = new Date();

				str = fill_zero(now.getHours())+fill_zero(now.getMinutes())+fill_zero(now.getSeconds());

				for (var i = 0; i < str.length; i++) {

					$('.num').eq(i).attr('src','./'+str[i]+".png");
				}

			}
			setInterval(run,1000);

		})
	</script>
</head>
<body>
	<div class="box">
		<img src="./0.png" alt="" class="num">
		<img src="./9.png" alt="" class="num">
		<img src="./dian.png" alt="">
		<img src="./0.png" alt="" class="num">
		<img src="./9.png" alt="" class="num">
		<img src="./dian.png" alt="">
		<img src="./5.png" alt="" class="num">
		<img src="./6.png" alt="" class="num">
	</div>
</body>
</html>